<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${course['courseName']}+' - 小班课详情 - '+${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
    <link th:href="@{{path}/common/v3/cssfont/myFonts/myFonts.css?v={v}(path=${staticPath},v=${v})}" rel="stylesheet" type="text/css"/>
</head>
<body>
<div data-th-replace="layout/common-hade-one"></div>
<div style="display: none;">
    <input type="hidden" id="courseId" th:value="${course['id']}"/>
    <input type="hidden" id="courseType" th:value="${course['courseTypeKey']}"/>
    <input type="hidden" id="contextStatus" th:value="${course['contextStatus']}"/>
    <input type="hidden" id="subjectIds" th:value="${course['subjectIds']}"/>
    <input type="hidden" id="price" th:value="${course['realPrice']}"/>
    <input type="hidden" id="buyCourse" th:value="${course['courseBuyStatus']['buy']}"/>
    <input type="hidden" id="mobilePath" th:value="${mobilePath}"/>
</div>
<div class="live-wrap-bg cm-bg-20">
    <section class="container">
        <div class="pt10 mt10">
            <ol class="breadcrumb">
                <li><a href="/" class="c-999">首页</a></li>
                <li><a href="/web/course/smallClassIndex" class="c-999">小班课</a></li>
                <li><a href="javascript:void(0)" class="c-999">小班课详情</a></li>
            </ol>
        </div>
        <div class="live-list__wrap">
            <div class="row">
                <div class="col-md-12 col-lg-12">
                    <div class="thumbnail live-list-item">
                        <div class="live-caption">
                            <div class="pt10 mt5 pl10 pr10">
                                <div class="row">
                                    <section class="col-sm-8">
                                        <section class="cm-desc-txt__twoLine">
                                            <strong class="fs20 c-333" th:text="${course['courseName']}">
                                                初中新概念一册精读直播课（Lesson41-90）
                                            </strong>
                                        </section>
                                    </section>
                                    <section class="col-sm-4">
                                        <aside class="pull-right ml20 pr">
                                            <a href="javascript:void(0)" id="QRCodeInp" class="c-999" data-container="body" data-trigger="hover" data-html="true" data-toggle="popover" data-placement="left" data-content="<img src= width=140 height=140 style=width:140px;height:140px; />" data-original-title="" title="">
                                                <i class="fa fa-qrcode fs16 mr5 vam"></i>扫一扫学习
                                                <!--<canvas width="140" height="140" style="display: none;"></canvas>-->
                                            </a>
                                        </aside>
                                        <aside class="pull-right" data-share="">
                                            <a href="javascript:void(0)" class="c-999 oShareBtn" th:attr="data-mobile=${mobilePath}+${mobilePathShare},data-share=!${#maps.isEmpty(course['imageMap'])} and !${#maps.isEmpty(course['imageMap']['pcUrlMap'])} and !${#strings.isEmpty(course['imageMap']['pcUrlMap']['large'])}? ${course['imageMap']['pcUrlMap']['large']}:''">
                                                <i class="fa fa-share-alt mr5 vam"></i>分享</a>
                                        </aside>
                                    </section>
                                </div>
                                <section class="hLh30 mt10">
                                    <aside class="pull-left fs14 c-333 ">
                                        <i class="fa fa-clock-o vam"></i>
                                        <span class="vam">开课时间：</span>
                                        <span class="vam" th:text="${#strings.substring(course['openTime'],0,16)}">10月10日</span>
                                        <span class="vam ml5 mr5">至</span>
                                        <span class="vam" th:text="${#strings.substring(course['endTime'],0,16)}">12月21日第周日晚上18:00-21:00</span>
                                    </aside>
                                    <aside class="pull-left ml20">
                                        <a href="javascript:;" id="sFree-play-btn" class="fs14 c-info" th:data-code="${course['audition']}">
                                            <i class="fa fa-play-circle-o"></i> 试看，一睹授课风采
                                        </a>
                                    </aside>
                                </section>
                                <section class="mt20 clearfix">
                                    <aside class="pull-left">
                                        <span class="fs14 c-999 vam">
                                            共<span th:if="${course['nodeNum']}!=null" th:text="${course['nodeNum']}"></span>讲
                                        </span>
                                        <span class="ml10 fs14 c-danger vam" th:if="${course['limitDay']}>0 and ${course['limitDate']}!=null" th:text="'距离停售还有'+${course['limitDay']}+'天'"></span>
                                        <span class="ml10 fs14 c-danger vam" th:if="${course['limitDay']}<=0 and ${course['limitDate']}!=null">此课已停售，请关注其它</span>
                                        <span class="label label-warning fs12 ml20 vam" th:if="${course['buyNum']}-${course['courseProfile']['buyCount']}>0">
                                            <span>还剩</span>
                                            <span th:text="${course['buyNum']}-${course['courseProfile']['buyCount']}"></span>
                                            <span>个名额</span>
                                        </span>
                                        <span class="label label-warning fs12 ml20 vam" th:if="${course['buyNum']}-${course['courseProfile']['buyCount']}<=0">名额已满</span>
                                    </aside>
                                    <aside th:if="${course['courseBuyStatus']['memberPriceBut']} or ${course['courseBuyStatus']['memberFreePriceBut']}" class="pull-right">
                                        <a th:href="@{/web/uc/member/queryMemberList}">
                                            <button class="btn btn-sm btn-outline btn-warning" type="button">
                                                <i class="fa fa-tag mr5"></i> 加入会员享受会员价：
                                                <span  th:if="${course['courseBuyStatus']['memberPriceBut']}" th:text="${course['memberPrice']}"></span>
                                                <span th:if="${course['courseBuyStatus']['memberFreePriceBut']}">免费</span>
                                            </button>
                                        </a>
                                    </aside>
                                </section>
                                <section class="row mt20">
                                    <section class="col-sm-5">
                                        <section class="sc-teacher-item clearfix">
                                            <span class="live-t-img vam mr10" th:if="${!#lists.isEmpty(course['teacherList'])}" th:each="teacher,index:${course['teacherList']}">
                                                <img class="img-circle lazy-user" th:alt="${teacher['teacherName']}"   th:attr="data-original=${teacher['imageMap']['pcUrlMap']['large']}">
                                                <span class="fs12 c-999 mt5" th:text="'授课 '+${teacher['teacherName']}">授课 李小龙</span>
                                            </span>
                                        </section>
                                    </section>
                                    <section class="col-sm-7 mt10">
                                        <section class="clearfix">
                                            <div class="cm-buy-group pull-right">
                                                <th:block th:if="!(${course['status']}==2  or ${course['status']}==3 )">
                                                    <button th:attrappend="data-course-id=${course['id']}" id="pay-course" th:if="!${course['courseBuyStatus']['buy']} and (${course['courseBuyStatus']['buyBut']} or ${course['courseBuyStatus']['memberBut']})" class="btn  btn-rounded btn-enter-living btn-play ml20">
                                                        <span class="fs16" th:if="${course['courseBuyStatus']['buyBut']}" data-type="1">立即报名</span>
                                                        <span class="fs16" th:if="${course['courseBuyStatus']['memberBut']} and !${course['courseBuyStatus']['buyBut']}" data-type="2">开通会员</span>
                                                    </button>
                                                    <button th:if="!${course['courseBuyStatus']['buy']} and ${course['courseBuyStatus']['freeBuyBut']}" th:attrappend="data-course-id=${course['id']},data-pay-type=${course['courseBuyStatus']['payType']}" class="btn free-play-btn btn-rounded btn-enter-living btn-play free-bm-box ml20">
                                                        <span class="fs16">免费报名</span>
                                                    </button>
                                                </th:block>

                                                <th:block th:if="!(${course['status']}==2  or ${course['status']}==3 )">
                                                    <button th:attrappend="data-course-id=${course['id']}"  th:if="${course['courseBuyStatus']['buy']} and (${course['courseBuyStatus']['buyBut']} or ${course['courseBuyStatus']['memberBut']})" class="btn  btn-rounded btn-enter-living btn-play ml20 disabled">
                                                        <span class="fs16" th:if="!${course['courseBuyStatus']['buyBut']}" data-type="1">已购买</span>
                                                    </button>
                                                    <button th:if="${course['courseBuyStatus']['buy']} and ${course['courseBuyStatus']['freeBuyBut']}" th:attrappend="data-course-id=${course['id']},data-pay-type=${course['courseBuyStatus']['payType']}" class="btn  btn-rounded btn-enter-living btn-play ml20 disabled">
                                                        <span class="fs16">已购买</span>
                                                    </button>
                                                </th:block>

                                                <th:block th:if="(${course['status']}==2  or ${course['status']}==3 ) and !${course['courseBuyStatus']['buy']} ">
                                                    <button th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}" disabled="disabled" id="abandoned" class="btn  btn-rounded btn-enter-living btn-play ml20">
                                                        <span class="fs16" >已下架</span>
                                                    </button>
                                                </th:block>
                                                <a class="ml10" th:href="${serviceMap['type']}==2?'tel:'+${serviceMap['context']}:${serviceMap['context']}">
                                                    <button type="button" class="btn btn-warning btn-outline btn-rounded fs16 btn-play">课程咨询</button>
                                                </a>
                                            </div>
                                            <aside class="pull-right mt10">
                                                <span class="fs12 c-price" th:if="${course['realPrice']} > 0">
                                                    <i class="fa fa-rmb"></i>
                                                    <span class="fs24">10.0</span>
                                                </span>
                                                <span class="fs20 c-free" th:if="${course['realPrice']} <= 0">免费</span>
                                                <s class="fs14 c-999 ml10" th:text="'￥'+${course['orPrice']}">￥896.0</s>
                                            </aside>
                                        </section>
                                    </section>
                                </section>
                                <section class="cm-attr-alert mt20 pt10">
                                    <div class="alert alert-info">
                                        <div class="pt10 pb10 ml20 mr20">
                                            <div class="row">
                                                <section class="col-sm-4">
                                                    <section class="hLh20 txtOf" id="activityList">
                                                        <span class="label label-primary fs12 mr5 pull-left">活动</span>
                                                        <span class="c-999 fs12 pull-left" id="activity-context-box">暂无活动</span>
                                                    </section>
                                                </section>
                                                <section class="col-sm-4">
                                                    <section class="hLh20 txtOf">
                                                        <span class="label label-warning fs12 mr5 pull-left">服务</span>
                                                        <span class="c-999 fs12 pull-left" th:text="${course['courseService']}">48小时答疑 . 作业批改 . 学习资料</span>
                                                    </section>
                                                </section>
                                                <section class="col-sm-4">
                                                    <section class="hLh20">
                                                        <span class="label label-danger fs12 mr5 pull-left">优惠</span>
                                                        <span class="c-999 fs12 pull-left">学习更轻松，快来领取优惠券吧！</span>
                                                        <aside class="pull-left dropdown ml10">
                                                            <a href="javascript:;" id="show-receive-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle fs12 c-danger"> 点击领取 <span class="caret"></span></a>
                                                            <div class="dropdown-menu dropdown-box" style="left: inherit;right: 0;">
                                                                <ul class="opCard-item__wrap" id="course-coupon-list">
                                                                </ul>
                                                            </div>
                                                        </aside>
                                                    </section>
                                                </section>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="row">
                <section class="col-sm-9">
                    <div class="thumbnail">
                        <div class="live-caption">
                            <div class="pt10 pb10">
                                <section class="c-info-tab">
                                    <h4 data-tab="details"><span class="fs16 c-333">介绍</span></h4>
                                    <h4 class="active" data-tab="catalogs"><span class="fs16 c-333">目录</span></h4>
                                    <h4 data-tab="comments"><span class="fs16 c-333">评价</span></h4>
                                </section>
                                <div class="c-cont__wrap">
                                    <!--介绍 开始-->
                                    <article class="hide" data-tab="details">
                                        <section th:if="${#strings.isEmpty(course['details'])}" class="no-data__wrap">
                                            <span class="no-data-ico"></span>
                                            <p class="mt20"><span class="c-666">暂无详情介绍~~</span></p>
                                        </section>
                                        <section th:if="!${#strings.isEmpty(course['details'])}">
                                            <div class="mt20 pt10 mr20 ml10" th:utext="${course['details']}"></div>
                                        </section>
                                    </article>
                                    <!--介绍 结束-->
                                    <!--目录 开始-->
                                    <article data-tab="catalogs" id="course-catalog-box">
                                        <div class="text-center pt10 pb10"><span class="loading"></span></div>
                                    </article>
                                    <!--目录 结束-->
                                    <!--评论 开始-->
                                    <article class="hide" data-tab="comments" id="comment-container">
                                        <div class="text-center pt10 pb10"><span class="loading"></span></div>
                                    </article>
                                    <!--评论 结束-->
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="col-sm-3">
                    <div class="thumbnail">
                        <div class="live-caption">
                            <div class="pt10 mt10">
                                <section class="c-head-title">
                                    <h6><span class="fs16 c-333" title="上小班课的人">上小班课的人</span></h6>
                                    <hr>
                                </section>
                                <div class="mt10">
                                    <div class="carousel slide carousel-class-member__wrap">
                                        <div class="carousel-inner">
                                            <div class="item active bespeak-item" id="carousel-class-member">
                                        <span class="no-data__wrap">
                                            <span class="no-data-ico"></span>
                                            <p class="mt20"><span class="c-666">还没有参加小班课的人~~~</span></p>
                                        </span>

                                            </div>
                                        </div>
                                        <a data-placement="top" data-toggle="tooltip" data-original-title="上一组" id="prevPage" data-slide="prev" href="javascript:void(0)" class="left carousel-control">
                                            <span class="fa fa-chevron-left"></span>
                                        </a>
                                        <a data-placement="top" data-toggle="tooltip" data-original-title="下一组" id="nextPage" data-slide="next" href="javascript:void(0)" class="right carousel-control">
                                            <span class="fa fa-chevron-right"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <div class="live-caption">
                            <div class="mt10 pt10">
                                <section class="c-head-title">
                                    <h6><span class="fs16 c-333" title="讲师">讲师</span></h6>
                                    <hr>
                                </section>
                                <div class="carousel-inner" th:if="${course['teacherList']}==null">
                                    <div class="item active bespeak-item">
                                        <span class="no-data__wrap">
                                            <span class="no-data-ico"></span>
                                            <p class="mt20"><span class="c-666">暂时没有讲师哦~~~</span></p>
                                        </span>
                                    </div>
                                </div>
                                <div>
                                    <section th:each="teacher,index: ${course['teacherList']}" th:if="${index['index']} < 4" class="clearfix mt20">
                                        <div class="media">
                                            <div class="media-left">
                                                <a th:href="@{/web/teacher/info?teacherId={teacherId}(teacherId=${teacher['id']})}">
                                                    <img th:attr="data-original=${teacher['imageMap']['pcUrlMap']['large']}" class="media-object img-circle lazy-user vam" width="56" height="56"/>
                                                </a>
                                            </div>
                                            <div class="media-body pl10">
                                                <h4 class="media-heading">
                                                    <span class="fs16 c-333" th:text="${teacher['teacherName']}"></span>
                                                </h4>
                                                <span class="c-bbb fs12 pt5 show" th:if="${teacher['teacherType']}==1">平台自有</span>
                                                <span class="c-bbb fs12 pt5 show" th:if="${teacher['teacherType']}==2">入驻专家</span>
                                            </div>
                                            <div th:if="${teacher['isQuestion']}==1" class="media-right askQuestions" data-quiz >
                                                <a th:href="@{/web/uc/qa/initSaveQuestionView?type=2&teacherId={teacherId}(teacherId=${teacher['id']})}">
                                                    <button  class="btn btn-sm btn-info btn-rounded btn-outline" type="button">向TA提问</button>
                                                </a>
                                            </div>
                                            <div class="mt20 wm-info-teacher-desc__wrap">
                                                <p class="fs12 c-999" th:utext="${teacher['depict']}"></p>
                                            </div>
                                        </div>
                                        <hr>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>
</div>
<div data-th-replace="layout/footer"></div>
<script type="text/javascript" th:src="@{{path}/front/web/business/order/goods/gen-free-order.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/common/shareFn.js?v={v}(path=${staticPath}, v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/common/qrcode/qrcode.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/course/smallClass/small-class-course-info.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-activity-code.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/course/favorites/course-favorites.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-buy-user.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/course/smallClass/small-class-course-catalog.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-guideBuy.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/business/course/courseComment/course-comment.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/common/qrcode/jquery.qrcode.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/front/web/common/sysCheck.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>